// 使用场景：项目中如果有多处都使用到了同一种逻辑的js代码此时就可以把这些代码封装成自定义hooks，达到代码的复用
// vue3的自定义hooks和vue2的mixins作用一摸一样
import { onBeforeMount, onMounted, ref } from "vue";
export const useResize = (w) => {
  const width = ref(w);
  // resize事件可能会有性能问题，所以要在组件卸载后清除事件监听
  const Fn = function () {
    console.log(document.body.offsetWidth);
    width.value = document.body.offsetWidth - 100;
  };
  onMounted(() => {
    // 页面一加载就渲染
    Fn();
    window.addEventListener("resize", Fn);
  });
  onBeforeMount(() => {
    window.removeEventListener("resize", Fn);
  });
  return {
    width,
  };
};
